<template>
  <div class="os-main">
    <ConfigForm v-model="dataForm" :config="config" ref="configFormRef" />

    <el-button type="primary" @click="openJson">查看表单数据</el-button>

    <el-drawer v-model="drawerVisiable" title="数据视图" :direction="'rtl'" size="40%">
      <CodeView :code-json="JSON.stringify(dataForm, null, '\t')"></CodeView>
    </el-drawer>
  </div>
</template>

<script lang="ts" setup>
import type { Config } from '@/components/ConfigForm'
import { ref } from 'vue';
import CodeView from '@/components/CodeView/index.vue'
import ConfigForm from '@/components/ConfigForm/index'

const makeRange = (start: number, end: number) => {
  const result: number[] = []
  for (let i = start; i <= end; i++) {
    result.push(i)
  }
  return result
}
const disabledHours = () => {
  return makeRange(0, 16).concat(makeRange(19, 23))
}
const disabledMinutes = (hour: number) => {
  if (hour === 17) {
    return makeRange(0, 29)
  }
  if (hour === 18) {
    return makeRange(31, 59)
  }
}
const disabledSeconds = (hour: number, minute: number) => {
  if (hour === 18 && minute === 30) {
    return makeRange(1, 59)
  }
}

/**ConfigForm绑定对象 */
const dataForm = ref<ObjectAny>({})

/**ConfigForm配置 */
const config = ref<Config>({
  mode: 'add',
  formProps: {},
  rowProps: {},
  columns: [
    { prop: 'demo1', label: '基础用法', type: 'timePicker' },
    { prop: 'demo2', label: '值格式化', type: 'timePicker', props: { valueFormat: 'HH:mm:ss' } },
    { prop: 'demo3', label: '显示箭头', type: 'timePicker', props: { arrowControl: true } },
    {
      prop: 'demo4', label: '限定时间选择范围', type: 'timePicker',
      props: { disabledHours, disabledMinutes, disabledSeconds }
    },
    { prop: 'demo5', label: '限定时间选择范围', type: 'timePicker', props: { isRange: true, rangeSeparator: '至' } },
  ]
})

// 数据视图
const drawerVisiable = ref(false)
const openJson = () => {
  drawerVisiable.value = true
}
</script>